<template>
	<footer>
		<div class="warp">
			<div class="container">
				<div class="row">
					<div class="col-6 col-md-3">
						<div class="view">
							<h4>Arewana</h4>
							<p>
								Lorem Ipsum is simply dummy text of the and typesetting industry.
								Lorem Ipsum is dummy text of the printing.
							</p>
							<div class="footer_addr">
								<ul>
									<li>
										<div class="footer_icon">
											<b-icon class="icon_cart" icon="geo-alt"></b-icon>
										</div>
										<div class="footer_addr_info">
											<p>Brooklyn, New York, United States</p>
										</div>
									</li>
									<li>
										<div class="footer_icon">
											<b-icon class="icon_cart" icon="telephone"></b-icon>
										</div>
										<div class="footer_addr_info">
											<p>12345679</p>
										</div>
									</li>
									<li>
										<div class="footer_icon">
											<b-icon class="icon_cart" icon="envelope"></b-icon>
										</div>
										<div class="footer_addr_info">
											<p>example@163.com</p>
										</div>
									</li>
								</ul>
							</div>
							<div class="footer_social_media">
								<b-icon class="icon_cart" icon="truck"></b-icon>
								<b-icon class="icon_cart" icon="tree"></b-icon>
								<b-icon class="icon_cart" icon="twitter"></b-icon>
								<b-icon class="icon_cart" icon="twitch"></b-icon>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="view">
							<h4>Company</h4>
							<div class="footer_menu">
								<ul>
									<li>
										<router-link to=""><span>About</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Blog</span> </router-link>
									</li>
									<li>
										<router-link to=""><span>All Products</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Locations Map</span></router-link>
									</li>
									<li>
										<router-link to=""><span>FAQ</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Contact Us</span></router-link>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="view">
							<h4>Service</h4>
							<div class="footer_menu">
								<ul>
									<li>
										<router-link to=""><span>Order tracking</span> </router-link>
									</li>
									<li>
										<router-link to=""><span>Wish List</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Login</span></router-link>
									</li>
									<li>
										<router-link to=""><span>My Account</span></router-link>
									</li>
									<li>
										<router-link to=""><span>TermCon</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Promotional Offer</span></router-link>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-3">
						<div class="view">
							<h4>Customer</h4>
							<div class="footer_menu">
								<ul>
									<li>
										<router-link to=""><span>Login</span></router-link>
									</li>
									<li>
										<router-link to=""><span>My account</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Wish List</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Locations Map</span></router-link>
									</li>
									<li>
										<router-link to=""><span>FAQ</span></router-link>
									</li>
									<li>
										<router-link to=""><span>Contact Us</span></router-link>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</template>

<script>
	import mixin from "../../mixins/page.js";
	export default {
		mixins: [mixin],
		components: {},
		data() {
			return {
				nav_main: [],
			};
		},
		methods: {},
		created() {},
	};
</script>

<style scoped="scoped">
	footer {
		position: relative;
		bottom: 0px;
		width: 100%;
		height: auto;
		background-color: #f2f6f7;
	}

	.footer_area {
		text-align: center;
		margin: 10px auto;
		padding: 20px 15px 10px 15px;
		max-width: 1200px;
		display: flex;
		justify-content: space-between;
	}

	.footer_menu span :hover {
		color: #ffc4c8;
	}

	.footer_area h4 {
		text-align: left;
	}

	.footer_area p {
		text-align: left;
		word-wrap: break-word;
		font-size: 14px;
		margin-bottom: 15px;
	}

	ul {
		padding: 0;
	}

	li {
		list-style: none;
	}
	.footer_icon {
		margin-right: 10px;
		font-size: 12px;
	}

	.footer_social_media {
		display: flex;
	}

	.footer_social_media .icon_cart {
		margin-right: 20px;
	}
</style>
